<template>
    <div class="login-container">
        <el-form
            :model="user"
            :rules="valid"
            class="login-form"
            ref="login-form">
            <el-form-item>
<!--                <div class="login-logo"></div>-->
                <h1>WW Vue后台系统</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input v-model="user.username"
                          prefix-icon="el-icon-mobile-phone"
                          placeholder="请输入账号" >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password"
                          @keyup.enter.native="onLogin"
                          v-model="user.password"
                          prefix-icon="el-icon-message"
                          placeholder="请输入密码" >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox class="login-check" v-model="isAgree"></el-checkbox>
                <span style="font-size: 12px;font-family:Microsoft YaHei">我已阅读且同意相关隐私协议</span>
            </el-form-item>
            <el-form-item>
                <el-popover
                    placement="right"
                    trigger="click">
                    <!-- 拖动验证登录 v-show="showSlideImg" -->
                    <div class="slideImg-wrapper">
                        <slide-check
                            class="slideImg"
                            :width="300"
                            :height="300"
                            @success="validSuccess"
                            @fail="validFail"
                            :src="src">
                        </slide-check>
                    </div>
                    <el-button slot="reference" type="primary" class="login-btn" :loading="loginLoading" @click="onLogin">登录</el-button>
                </el-popover>

            </el-form-item>
        </el-form>



    </div>
</template>

<script>
    import Vue from 'vue'
    import { SlideCheck } from 'vue-gn-components'
    import "vue-gn-components/lib/style/index.css"
    Vue.use(SlideCheck)
    import {login} from "../../api/user"
    export default {
        name: 'LoginIndex',
        data() {
            return {
                showSlideImg: false,
                src: [
                    require("./img/login_bg.jpg"),
                    require("./img/Photos Library.jpg")
                ],
                user: {
                    username: 'root',
                    password: 'admin'
                },
                isAgree: true,       // 是否同意协议
                loginLoading: false,  // 是否正在登录
                valid: {              // 表单控件验证
                    username: [
                        {required: true, message: '账号不能为空', trigger: 'blur'}
                        // {pattern: /^1[3|4|5|7|8][0-9]{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '密码不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            onLogin() {
                if (!this.isAgree) {
                    this.$message.warning('请先同意相关隐私协议')
                    return
                }
                this.showSlideImg = true
            },
            login() {
                this.loginLoading = true
                // 表单提交
                setTimeout(() => {
                    login(this.user).then(res => {
                        this.showSlideImg = false
                        if(res.data.code === 200){
                            this.$message({
                                message: '登录成功',
                                type: 'success'
                            })
                            this.loginLoading = false
                            window.localStorage.setItem('ww-token',res.data.data)
                            window.localStorage.setItem(res.data.data,this.user.username)
                            // 跳转后台首页
                            this.$router.push("/")
                        }else{
                            this.$message.error('登录异常：'+res.data.msg)
                            this.loginLoading = false
                        }
                    }).catch(error => {
                        this.$message.error('登录失败')
                        this.loginLoading = false
                    })
                }, 0)
            },
            validSuccess() {
                // 表单验证
                console.log(this.$refs['login-form'].validate((valid, error) => {
                    // 验证失败
                    if (!valid) {
                        return
                    }
                    // 验证通过 ，登录操作
                    this.login()
                }))
            },
            validFail() {
                this.$message.error('验证失败')
            }
        }
    }
</script>

<style scoped>
    .login-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex; /* 水平排列 */
        flex-direction: column; /* 上下排列 */
        justify-content: center;
        align-items: center;
        background: url("./img/login_bg.jpg") repeat;
        background-size: cover;
    }

    .login-form {
        width: 300px;
        background: #fff;
        padding: 60px;
        min-width: 120px;
    }

    .login-btn {
        width: 100%;
    }

    .login-check {
        margin-right: 5px !important;
    }

    .login-logo {
        background: url("./img/logo_index.png") no-repeat;
        width: 300px;
        height: 57px;
    }
    .slideImg-wrapper{
        display: inline-block;
    }
    .slideImg{
        box-shadow: none;
    }
    /*.slideImg{*/
    /*    display: inline-block;*/
    /*    z-index: 999;*/
    /*    background: #fff;*/
    /*}*/
    /*.slideImg-wrapper{*/
    /*    position: fixed;*/
    /*    top: 150px;*/
    /*    bottom: 0;*/
    /*    left: 0;*/
    /*    right: 0;*/
    /*    text-align: center;*/
    /*    z-index: 2081;*/
    /*}*/
</style>
